<template>
  <div class="shop_detail">
    <div class="detail_top">
      <div class="detail_header">
        <VanIcon name="wap-home-o" @click="toIndex" />
        <span class="header_text">网易严选</span>
        <VanIcon class="icon" name="search" @click="toSearch" />
        <VanIcon name="shopping-cart-o" @click="toShopCart" />
      </div>
    </div>
    <img class="top_img" :src="skuInfo.skuDefaultImg" alt="" />
    <div class="money_main">
      <div class="shop_money">
        <span class="shop_text"> <span class="shop_span">￥</span>{{ skuInfo.price }}</span>
        <div class="money_border">
          <span>到手</span>
          <span>￥</span>
          <span class="money_dao">{{ skuInfo.price }}</span>
          <span>></span>
        </div>
      </div>
    </div>

    <div class="shop_main">
      <div class="main_title">
        <div class="main_name">
          {{ skuInfo.skuName }}
        </div>
        <div class="shop_logo">
          <img class="logo_img" src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" alt="" />
          <span>华纺</span>
        </div>
        <div class="shop_liyou">推荐理由</div>
      </div>
      <div class="main_border">
        <div class="border_main">
          <div class="border_title">1</div>
          <div class="border_text">60支全棉贡缎 柔软舒适 细腻亲肤</div>
        </div>
        <div class="border_main">
          <div class="border_title">1</div>
          <div class="border_text">60支全棉贡缎 柔软舒适 细腻亲肤</div>
        </div>
      </div>
    </div>
    <div class="main_img">
      <img class="img" src="https://yanxuan.nosdn.127.net/static-union/16790249238cd1e9.png?imageView&quality=75" alt="" />
    </div>

    <div class="delivery">
      <div class="delivery_money">邮费: &nbsp; 单件包邮</div>
      <div class="delivery_right">></div>
    </div>
    <div class="kong"></div>

    <div class="delivery">
      <div class="delivery_money">请选择规格数量</div>
      <div class="delivery_right">></div>
    </div>

    <div class="xian">
      <div class="delivery_money">限制: 该商品不可使用优惠券</div>
    </div>

    <div class="delivery">
      <div class="delivery_money">配送: &nbsp; 请选择配送地址</div>
      <div class="delivery_right">></div>
    </div>

    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>

    <div class="shop_list">
      <div class="shop_can">商品参数</div>
      <div class="list_item">
        <div class="mian">面料</div>
        <div class="quan">全棉</div>
      </div>
      <div class="list_item">
        <div class="mian">适用年龄</div>
        <div class="quan">3岁以上</div>
      </div>
      <div class="list_item">
        <div class="mian">适用季节</div>
        <div class="quan">四季</div>
      </div>
      <div class="list_item">
        <div class="mian">款式</div>
        <div class="quan">床单式</div>
      </div>
      <div class="list_item">
        <div class="mian">工艺</div>
        <div class="quan">AB版、贡缎</div>
      </div>
      <div class="list_item">
        <div class="mian">风格</div>
        <div class="quan">中式、现代简约</div>
      </div>
    </div>
    <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '397.5px' }">
      <div class="buy_main">
        <div class="main_header">
          <img class="header_img" :src="skuInfo.skuDefaultImg" alt="" />
          <div class="header_text">
            <p class="p1">价格:￥{{ skuInfo.price }} 到手￥{{ skuInfo.price }}</p>
            <p class="p2">已选择: {{ count }}</p>
          </div>
        </div>
        <div class="xh">型号</div>
        <div class="xz">
          <div class="xz_item active" v-for="(item, index) in skuInfo.skuSaleAttrValueList" :key="item.id">
            <span class="xz_text">{{ item.saleAttrValueName }}</span>
          </div>
        </div>
        <div class="xh">数量</div>

        <div class="jj">
          <div class="jian" @click="onJian">-</div>
          <div class="sz">{{ count }}</div>
          <div class="jia" @click="onJia">+</div>
        </div>
      </div>
    </van-popup>

    <div class="end">
      <van-button>
        <van-icon name="service-o" />
      </van-button>
      <van-button square type="default" @click="onBuy">立即购买</van-button>
      <van-button type="danger" @click="toShopList">加入购物车</van-button>
    </div>

    <van-cell v-for="item in list" :key="item" :title="item" />

    <van-back-top />
  </div>
</template>
<script lang="ts">
import router from '@/router'
import { showToast } from 'vant'
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Detail'
})
</script>
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'

import { useShopItemStore } from '@/stores/modules/detail'

import toShop from '@/api/detail'

import { storeToRefs } from 'pinia'
import { showToast } from 'vant'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'

const $router = useRouter()

const router = useRoute()

const { id } = router.query

let showBottom = ref(false)

const count = ref(1)

const gb = ref(false)

const list = [...Array().keys()]

const images = [
  'https://yanxuan.nosdn.127.net/static-union/16790188129d9b90.jpg?quality=75&type=webp&imageView&thumbnail=750x0',
  'https://yanxuan.nosdn.127.net/static-union/1679560356693189.jpg?quality=75&type=webp&imageView&thumbnail=750x0'
]

// 点击切换到首页
const toIndex = () => {
  $router.push({
    name: 'Home',
    path: '/home'
  })
}

// 点击切换搜索页
const toSearch = () => {
  $router.push({
    name: 'Search',
    path: '/search'
  })
}

// 点击其他换购物车页面
const toShopCart = () => {
  $router.push({
    name: 'ShopCart',
    path: '/shopCart'
  })
}
const useShopItemStor = useShopItemStore()
onMounted(() => {
  let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 19, 22]

  useShopItemStor.getShopItemList(Math.floor(Math.random() * (arr.length - 1) + 0))
  // console.log(spuSaleAttrList)
})

const onBuy = () => {
  showBottom.value = true
}

const onJian = () => {
  if (count.value <= 1) return
  count.value = count.value - 1
}

const onJia = () => {
  count.value = count.value + 1
}
const { skuInfo, spuSaleAttrList } = storeToRefs(useShopItemStor)

// 添加到购物车
const toShopList = () => {
  showToast('添加购物车成功')
  let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 19, 22]
  toShop.postShopItem(1, Math.floor(Math.random() * (arr.length - 1) + 0))
}
</script>

<style lang="less" scoped>
.shop_detail {
  // height: 800px;
  .detail_top {
    position: sticky;
    z-index: 999;
    top: 0;
    .detail_header {
      padding-left: 12px;
      padding-right: 8px;
      .icon {
        margin-right: 12px;
      }
      height: 44px;
      background-color: #fafafa;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .header_text {
        flex: 1;
        text-align: center;
      }
    }
  }
  .top_img {
    width: 375px;
    height: 375px;
    display: block;
  }
  .money_main {
    display: flex;
    align-items: center;
    height: 56px;
    background-color: #fa1e32;
    .shop_money {
      display: flex;
      align-items: center;
      .shop_text {
        display: flex;
        align-items: end;
        font-weight: 600;
        font-size: 28px;
        color: #fff;
        .shop_span {
          font-size: 18px;
          margin-left: 10px;
        }
      }
      .money_border {
        width: 76px;
        height: 23px;
        margin-left: 4px;
        padding: 0 4px;
        border-radius: 15px;
        background-color: white;
        display: flex;
        align-items: center;

        :deep(span) {
          font-size: 5px;
          color: #fa1e32;
          font-weight: 600;
        }
        .money_dao {
          font-size: 16px;
        }
      }
    }
  }
  .shop_main {
    height: 182.5px;
    background-color: white;
    padding: 13px 0 18px 15px;
    .main_title {
      height: 99.5px;
      // display: flex;
      margin-top: 7px;
      padding-right: 94px;
      .main_name {
        font-size: 12px;
        height: 48px;
        width: 254px;
        margin-bottom: 2px;
      }
      .shop_logo {
        width: 254px;
        height: 18px;
        margin-top: 3px;
        margin-bottom: 2.5px;
        display: flex;
        .logo_img {
          width: 14px;
          height: 14px;
          margin-right: 4px;
        }
        span {
          color: #7f7f7f;
          font-size: 12px;
          margin-right: 3px;
        }
      }
      .shop_liyou {
        height: 18px;
        width: 254px;
        font-size: 12px;
        color: #333;
      }
    }
    .main_border {
      flex-direction: column;
      width: 345px;
      height: 54px;
      background-color: #eee;
      border: 1px solid #ddd;
      display: flex;
      justify-content: center;
      .border_main {
        padding-left: 10px;
        width: 323px;
        height: 18px;
        display: flex;
        align-items: center;
        .border_title {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          color: #dd1a21;
          border: 1px solid #dd1a21;
          font-size: 12px;
          font-weight: 600;
          text-align: center;
          line-height: 10px;
        }
        .border_text {
          font-size: 12px;
          line-height: 18px;
        }
      }
    }
  }
  .main_img {
    height: 83px;
    background-color: #eee;
    .img {
      height: 70px;
      margin-top: 13px;
      width: 100%;
    }
  }
  .delivery {
    height: 52px;
    display: flex;
    line-height: 52px;
    padding: 0 40px 0 15px;
    justify-content: space-between;
    .delivery_money {
      font-size: 14px;
    }
    .delivery_right {
      width: 25px;
      height: 25px;
    }
  }
  .kong {
    height: 10px;
    background-color: rgb(244, 244, 244);
  }
  .xian {
    height: 52px;
    display: flex;
    line-height: 52px;
    padding: 0 40px 0 15px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    .delivery_money {
      font-size: 14px;
    }
  }
  .shop_list {
    height: 396px;
    padding: 15px;
    .shop_can {
      font-size: 14px;
      height: 46px;
      line-height: 46px;
      border-bottom: 2px dashed #ddd;
    }
    .list_item {
      font-size: 12px;
      display: flex;
      height: 46px;
      line-height: 46px;
      border-bottom: 2px dashed #ddd;
      .mian {
        width: 74px;
        height: 22px;
        color: #ccc;
      }
    }
  }
  .van-popup {
    .buy_main {
      height: 397.5px;
      padding: 16.5px 15px 63px;
      .main_header {
        display: flex;
        height: 99px;
        margin-bottom: 21px;
        .header_img {
          width: 98px;
          height: 99px;
        }
        .header_text {
          margin-left: 10px;
          height: 99px;
          width: 159px;
          padding-top: 65px;
          box-sizing: border-box;

          .p1 {
            font-size: 14px;
            color: #dd1a21;
          }
          .p2 {
            font-size: 14px;
          }
        }
      }
      .xh {
        height: 26px;
        font-size: 14px;
        padding-bottom: 6px;
      }
      .xz {
        height: 102px;
        padding-bottom: 10px;
        display: flex;
        flex-wrap: wrap;
        .xz_item {
          width: 110px;
          height: 36px;
          margin-right: 15px;
          margin-bottom: 10px;
          padding: 0 12px;
          border: 2px solid black;
          border-radius: 5px;
          &.active {
            color: #dd1a21;
            border: 3px solid #dd1a21;
          }
          .xz_text {
            font-size: 14px;
            line-height: 36px;
          }
        }
      }
      .jj {
        height: 44px;
        padding-bottom: 10px;
        display: flex;
        .jian {
          width: 42px;
          height: 33px;
          border: 1px solid #ccc;
          align-items: center;
          text-align: center;
        }
        .sz {
          width: 62px;
          height: 33px;
          border: 1px solid #ccc;
          align-items: center;
          text-align: center;
        }
        .jia {
          width: 42px;
          height: 33px;
          border: 1px solid #ccc;
          align-items: center;
          text-align: center;
        }
      }
    }
  }
  .end {
    position: fixed;
    bottom: 0;
    display: flex;
    height: 52px;
    :deep(.van-button.van-button--default.van-button--normal.van-button--square) {
      width: 148.5px;
      height: 52px;
    }
    :deep(.van-button.van-button--danger.van-button--normal) {
      width: 148.5px;
      height: 52px;
    }
    :deep(.van-button.van-button--default.van-button--normal) {
      width: 78px;
      height: 52px;
    }
  }
}
</style>
